<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Entry Drawer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #results {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Random Entry Drawer</h1>
    <button id="drawButton">Draw Random Entries</button>
    <div id="results"></div>
    
    <script>
        $(document).ready(function() {
            const fileName = 'https://gitee.com/jiashuwu/voc/raw/master/voc.xlsx'; // Your Excel file name

            function readExcel(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const data = new Uint8Array(e.target.result);
                        const workbook = XLSX.read(data, { type: 'array' });
                        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                        const json = XLSX.utils.sheet_to_json(firstSheet);
                        resolve(json);
                    };
                    reader.onerror = reject;
                    reader.readAsArrayBuffer(file);
                });
            }

            async function drawEntries() {
                try {
                    const response = await fetch(fileName);
                    const blob = await response.blob();
                    const entries = await readExcel(blob);
                    const filteredEntries = entries.filter(entry => entry['Field1'] === 'EN'); // Adjust field name as needed
                    if (filteredEntries.length < 10) {
                        alert('Not enough entries to draw from.');
                        return;
                    }
                    const randomEntries = [];
                    while (randomEntries.length < 10) {
                        const randomIndex = Math.floor(Math.random() * filteredEntries.length);
                        if (!randomEntries.includes(filteredEntries[randomIndex])) {
                            randomEntries.push(filteredEntries[randomIndex]);
                        }
                    }
                    displayResults(randomEntries);
                } catch (error) {
                    console.error('Error reading the Excel file:', error);
                }
            }

            function displayResults(entries) {
                const resultsDiv = $('#results');
                resultsDiv.empty();
                if (entries.length === 0) {
                    resultsDiv.append('<p>No entries found.</p>');
                    return;
                }
                const ul = $('<ul></ul>');
                entries.forEach(entry => {
                    ul.append($('<li></li>').text(JSON.stringify(entry)));
                });
                resultsDiv.append(ul);
            }

            $('#drawButton').click(function() {
                drawEntries();
            });
        });
    </script>
</body>
</html>
